<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
	<meta charset="UTF-8">
	<title>CMS系统-装修模板管理</title>

	<!-- 引入样式 -->
	<link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
	<link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}">
	<link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}">
	<link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
	<!-- 引入组件库 -->
	<script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
	<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
	<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
	<script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
<div id="app" v-cloak>
	<div class="main-content">
			<div class="page-header">
				<h1 class="page-title">模板管理</h1>
				<div class="z-pop_question">
                    <el-popover
                            ref="popoverq"
                            placement="bottom-start"
                            width="400"
                            trigger="hover">
                        <p class="z-jiao">
						&nbsp;&nbsp;模板是系统固定的样式风格<br/>
						&nbsp;&nbsp;发布栏目时，可以自定义风格样式，也可以选项系统提供的模板风格<br/>
						&nbsp;&nbsp;<a href="javascript:;">查看更多帮助</a>
                        </p>
                    </el-popover>

                    <i v-popover:popoverq class="el-icon-question"></i>
                </div>
				<div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>内容<span>/</span>装修</div>
			</div>

				<div class="list-content">
					<!--条件筛选-->
					<div class="content_item_filter clearfix" :class="[hasfilterMore?'content_filter_more':'']">
					<div class="input-select fl btn-radid_none">
	                    <div class="filter-form filter-form-one clearfix">
	                        <el-input placeholder="模板名" v-model="conditions.name.value" clearable class="minW40 z_input-holder"></el-input>
	                        <el-select placeholder="是否启用" v-model="conditions.state.value" clearable class="z_select-holder">
                            <el-option label="是" value="1">是 </el-option>
                            <el-option label="否" value="0">否 </el-option>
                        </el-select>
	                    </div>
	                    <div class="filter-operate">
	                        <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i :class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
	                        <el-tooltip class="item" content="查询" placement="bottom-start">
	                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
	                        </el-tooltip>
	                        <el-tooltip class="item" content="清空" placement="bottom-start">
	                            <el-button icon="el-extend-clean" @click="handleClear"></el-button>
	                        </el-tooltip>
	                    </div>
                   </div>
						<div class="filter-btn fr">
							<el-button type="primary" @click="handleAdd">新增模板</el-button>
						</div>
					</div>

					<!--主体表格-->
					<div class="z-tables">
						<el-table ref="multipleTable" :data="moduleList" style="width: 100%;">
						    <el-table-column fixed type="index" label="序号" class-name="z-opt_btn"></el-table-column>
							<el-table-column label="模板名称" prop="name" min-width="200"></el-table-column>
							<el-table-column label="是否启用"  min-width="100">
							     <template scope="scope">
		                            <span v-if="scope.row.state">是</span>
		                            <span v-if="!scope.row.state">否</span>
		                        </template>
							</el-table-column>
							<el-table-column prop="createTime" label="创建时间"  min-width="150"></el-table-column></el-table-column>
							<el-table-column fixed="right" label="操作" min-width="140">
								<template slot-scope="scope">
									<el-button type="text" @click="handleEdit(scope.$position, scope.row)">搭建</el-button>
									<span class="table-spea-line">|</span>
								    <el-button type="text" @click="handleEdit(scope.$position, scope.row)">编辑</el-button>
									<span class="table-spea-line">|</span>
									<el-button type="text" @click="handleDelete(scope.$position, scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<!--分页-->
					<div class="grid-content">
					<div class="bg-purple-light">
						<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="currentPage"
								:page-sizes="pageSizeList"
								:page-size="pageSize"
								layout="total, sizes, prev, pager, next"
								:total="totalNum">
						</el-pagination>
				</div>
			</div>
			
			<el-dialog :title="openText" :visible.sync="dialogFormVisible">
			<el-form ref="module-form" :model="module" :rules="rules" label-width="80px" class="demo-ruleForm">
			    <el-form-item hidden
						label="ID" prop="uuid"> <el-input
						v-model="module.uuid"></el-input> 
				</el-form-item> 
				<el-form-item label="模板名称" prop="name">
					<el-input v-model="module.name"></el-input>
				</el-form-item>
				<el-form-item label="缩略图">
					<div class="upload-image-box" @click="dialogImageVisible = true" style="width:70px;height:70px;">
						<div v-show="uploadImage.imageUrl" class="upload-image">
							<img :src="uploadImage.imageUrl">
							<!-- <span class="upload-operate">点击修改</span> -->
							<span class="upload-operate upload-operate-delect" @click.stop="handleRemove">点击删除</span>
						</div>
						<span v-show="!uploadImage.imageUrl" class="upload-button">
							<i class="el-icon-upload"></i>
							添加图片
						</span>
					</div>
				</el-form-item>
				<el-form-item label="模板说明" prop="description"> 
					<el-input type="textarea" v-model="module.description" ></el-input>
				</el-form-item>
				<el-form-item label="是否启用" prop="specStatus"> 
		           <el-radio-group v-model="module.state"> 
				   <el-radio :label=1>是</el-radio> 
				   <el-radio :label=0>否</el-radio>
		          </el-radio-group> 
		    </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" id="addDialog" style="display: none">
				<el-button @click="saveModule" type="primary">确定</el-button>
				<el-button @click="dislogHide">取消</el-button>
			</div>
			<div slot="footer" class="dialog-footer" id="editDialog"
					style="display: none">
					<el-button @click="updateModule" type="primary">确定</el-button>
					<el-button @click="dislogHide">取消</el-button>
			</div>
		</el-dialog>
		
		<!-- 上传图片模态框 -->
		<el-dialog title="上传文件" :visible.sync="dialogImageVisible">
			<el-upload v-model="module.img"
			  ref="upload"
			  action="/fastdfs/file/uploadFile"
			  :multiple=false 
			  :limit="1"
			  list-type="picture"
			  :file-list="fileList"
			  :on-success="dosuccess"
			  :on-remove="handleRemove"
			  :before-upload="beforeAvatarUpload">
			  <el-button size="medium">+&nbsp;点击选择图片</el-button>
			  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1M</div>
			</el-upload>
			<div slot="footer" class="dialog-footer">
			    <el-button @click="dialogImageVisible = false">确 定</el-button>
			</div>
		</el-dialog>
        <!-- 上传图片模态框 end -->
   </div>
  </div>
 </div>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
            moduleList: [],
            showChoice: false,
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            dialogFormVisible: false,
            dialogImageVisible: false,  // 上传图片模态框是否显示
            openText: '新增模板',
	        // 上传图片数据
	        fileList:[],
	        uploadImage: {
	        	imageUrl: '',
	        	fileList: []
	        },
            conditions: {
                "name": {
                    "operation": "LIKE",
                    "value": ""
                },
                "state": {
                    "operation": "EQ",
                    "value": ""
                }
            },
            module: {},
            rules: {
            	name: [
                       {required: true, message: "请输入模板名称", trigger: 'blur'},
                       {max: 10, message: '模板名称不能超过10个字符', trigger: 'blur' }
                   ],
                   description:[{ max: 200, message: '模板说明不能超过200个字符',trigger: 'blur'}]
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
        },
        created: function() {
            var self = this;
            var queryMessage = {
                "queryPage": self.currentPage,
                "pageShow": self.pageSize,
                "queryParams": self.conditions,
                "sortMap": {
                    "createTime": "desc"
                }
            };
            $.ajax({
                url: "/backstage/cms/decorate/module/list",
                type: "POST",
                data: JSON.stringify(queryMessage),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function(data) {
                    if (data && data.returnCode == "1") {
                        self.moduleList = data.returnMessage;
                        self.totalNum = data.pager.totalNum;
                    }
                }
            });
        },
        methods: {
    	    dislogHide: function () {
    	  	      	this.dialogFormVisible = false;
    	  	      },
            handleQuery() {
                this.currentPage = 1;
                this.queryModule();
            },
            handleClear() {
                this.conditions.name.value = "";
                this.conditions.state.value = "";
            },
            // 列表筛选项更多操作
            toggleMoreSearch() {
                this.filterMore = !this.filterMore;
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryModule();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryModule();
            },
            handleCurrentTable: function (val) {
                window.location.href = 'edit.html?no=' + val.no;
            },
       	   beforeAvatarUpload(file) {
       	        const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
       	        const isLt2M = file.size / 1024 / 1024 < 1;

       	        if (!isJPG) {
       	        	this.$message({
                     message: '缩略图只能是 JPG、PNG 格式!',
                     type: 'error',
                     customClass: 'message-center',
                   });
       	        }
       	        if (!isLt2M) {
       	        	this.$message({
                        message: '缩略图大小不能超过 1MB!',
                        type: 'error',
                        customClass: 'message-center',
                      });
       	        }
       	        return isJPG && isLt2M;
       	      },
          	dosuccess:function(response, file, fileList){
        		this.module.img = response.fdfsIpPre + response.fullPath;
        		this.uploadImage.imageUrl = response.fdfsIpPre + response.fullPath;
        	},
        	handleRemove:function(file, fileList){
            	var self = this;
       			 $.post("/fastdfs/file/deleteFile",
    				    	{"fullPath":this.menu.icon},
    					    function(data) {	
    				    		var obj = eval('(' + data + ')');
    							if(obj.returnCode){
    								self.module.img = "";
    								self.uploadImage.imageUrl = "";
    								self.fileList=[];
    				            }
    					    }
    					);
            	},
            queryModule: function() {
                var self = this;
                var queryMessage = {
                    "queryPage": self.currentPage,
                    "pageShow": self.pageSize,
                    "queryParams": self.conditions,
                    "sortMap": {
                        "createTime": "desc"
                    }
                };
                $.ajax({
                    url: "/backstage/cms/decorate/module/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            self.moduleList = data.returnMessage;
                            self.totalNum = data.pager.totalNum;
                        }
                    }
                });
            },
            handleAdd() {
            	this.openText = '新增模板';
      	    	$("#addDialog").css('display','block'); 
      	    	$("#editDialog").css('display','none'); 
      	    	this.fileList = [];
      	    	this.uploadImage.imageUrl = "";
            	this.module.uuid = '';
            	this.module.name = '';
            	this.module.img = '';
            	this.module.description = '';
            	this.module.state = 1;
            	this.dialogFormVisible = true;
            },
            handleEdit(position, row) {
            	this.openText = '编辑模板';
      	    	$("#addDialog").css('display','none'); 
      	    	$("#editDialog").css('display','block'); 
      	    	this.module = row;
      	    	this.module.state = (row.state == true)?1:0;
      	        //如果菜单有图标，则显示并隐藏上传图标
                if (this.module.img != "") {
                	this.fileList = [{name:this.module.name,url:""+this.module.img+""}];
                	this.uploadImage.imageUrl = this.module.img;
                }else {
                	this.fileList = [];
                	this.uploadImage.imageUrl = "";
                }
            	this.dialogFormVisible = true;
            },
            saveModule: function(){
	            var self = this;
	            self.module.fileName = self.module.name;
  	            self.$refs['module-form'].validate((valid) => {
  	                if (valid) {
  	                    $.ajax({
  	                        url: "/backstage/cms/decorate/module/add",
  	                        type: "POST",
  	                        data: JSON.stringify(self.module),
  	                        contentType: "application/json;charset=UTF-8",
  	                        dataType: "json",
  	                        success: function(data) {
  	                            if (data && data.returnCode == "1") {
                                      self.$message({
                                          message: '新增模板成功',
                                          type: 'success',
                                          duration: 1000,
                                          customClass: 'message-center',
                                          onClose: function () {
                                              window.location.href = '/backstage/cms/decorate/module/tolist';
                                          }
                                      });
  	                            } else {
  	                                self.$message({
  	                                        message: '新增模板失败',
  	                                        type: 'error',
  	                                        duration: 1000,
  	                                        customClass: 'message-center',
  	                                        onClose: function () {
  	                                            window.location.href = '/backstage/cms/advert/tolist';
  	                                        }
  	                                    });
  	                            }
  	                        }
  	                    });
  	                }
  	            });
            },
           updateModule: function() {
 	            var self = this;
  	            self.$refs['module-form'].validate((valid) => {
  	                if (valid) {
  	                    $.ajax({
  	                        url: "/backstage/cms/decorate/module/edit",
  	                        type: "POST",
  	                        data: JSON.stringify(self.module),
  	                        contentType: "application/json;charset=UTF-8",
  	                        dataType: "json",
  	                        success: function(data) {
  	                            if (data && data.returnCode == "1") {
                                      self.$message({
                                          message: '编辑模板成功',
                                          type: 'success',
                                          duration: 1000,
                                          customClass: 'message-center',
                                          onClose: function () {
                                              window.location.href = '/backstage/cms/decorate/module/tolist';
                                          }
                                      });
  	                            } else {
                                      self.$message({
                                          message: '编辑模板失败',
                                          type: 'error',
                                          duration: 1000,
                                          customClass: 'message-center',
                                          onClose: function () {
                                              window.location.href = '/backstage/cms/decorate/module/tolist';
                                          }
                                      });
  	                            }
  	                        }
  	                    });
  	                }
  	            });
            },
            handleDelete(position, row) {
                var self = this;
                self.$confirm('确认要删除此模板?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(_ => {
                    $.ajax({
                    url: "/backstage/cms/decorate/module/delete",
                    type: "POST",
                    data: JSON.stringify([row.uuid]),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode == "1") {
                        	self.$message({
                        		 message: '删除成功',
                                 type: 'success',
                                 duration: 1000,
                                 customClass: 'message-center',
                                 onClose: function () {
                                     window.location.href = '/backstage/cms/decorate/module/tolist';
                                 }
                             });
                        } else {
                        	self.$message({
                       		 message: '删除失败',
                                type: 'error',
                                duration: 1000,
                                customClass: 'message-center',
                                onClose: function () {
                                    window.location.href = '/backstage/cms/decorate/module/tolist';
                                }
                            });
                        }
                    }
                });
            })
            }
        }
    });
</script>
</body>
</html>